<template>
  <div class="pie" id="pie"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Pie',
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  mounted() {
    const sum = this.data.reduce((acc, cur) => {
      return acc + Number(cur.value);
    }, 0);

    this.$nextTick(() => {
      const chartDom = document.getElementById('pie');
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '0'
        },
        series: [
          {
            name: '信息分布',
            type: 'pie',
            radius: ['40%', '75%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            // height: '90%',
            label: {
              position: 'inside',
              formatter: (cur) => {
                return ((cur.data.value / sum) * 100).toFixed(0) + '%';
              },
              color: '#fff'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '40',
            //     fontWeight: 'bold',
            //   }
            // },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ]
      };

      option && myChart.setOption(option);
    });
  }
};
</script>

<style scoped>
  .pie {
    height: inherit;
  }
</style>
